<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
    <meta http-equiv="Access-Control-Allow-Origin" content="*">
    <title>集鼠年福袋赢限量新春大礼</title>
    <link rel="stylesheet" href="base/public.css">
    <link rel="stylesheet" href="static/css/index.css">
    <style>
        @media (min-width: 320px) {
            html {
                font-size: 85.33px;
            }
        }

        @media (min-width: 360px) {
            html {
                font-size: 96px;
            }
        }

        @media (min-width: 375px) {
            html {
                font-size: 100px;
            }
        }

        @media (min-width: 411px) {
            html {
                font-size: 109.6px;
            }
        }

        @media (min-width: 414px) {
            html {
                font-size: 110.4px;
            }
        }

        @media (min-width: 768px) {
            html {
                font-size: 204.8px;
            }
        }

        @media (min-width: 1024px) {
            html {
                font-size: 273.06px;
            }
        }
    </style>
</head>

<body>
<div class="box">
    <div class="top-box">
        <img src="static/images/h5.png">
        <div class="rules">
            <img src="static/images/rules.png">
        </div>
    </div>
    <div class="year-bg">
        <div class="year-box">
            <div class="year-title-img">
                <img src="static/images/year-title-img.png">
            </div>
            <div class="blessing">
                <img src="static/images/blessing.png">
                <div class="blessing-text">
                    <p>1健康福</p>
                    <p>1事业福</p>
                    <p>1幸运福</p>
                    <p>1福袋</p>
                </div>
            </div>
            <div class="small-text">
                <p>*榜单根据福袋数量高低排序</p>
            </div>
            <div class="year-title">
                <img src="static/images/year-title-left.png">
                <p>福袋榜新春大礼</p>
                <img src="static/images/year-title-right.png">
            </div>
            <div class="middle-text">
                <p>活动榜单1-3名的用户<br/></p>
            </div>
            <div class="gold-bars">
                <div class="award_gift">
                    <img style="width: 80px; height: 80px;" src="static/images/nszj.png" alt="">
                    <p>年兽座驾 <br>x15天</p>
                </div>
                <div class="award_gift">
                    <img style="width: 80px; height: 80px;" src="static/images/xnxz.png" alt="">
                    <p>春节勋章 <br>x15天</p>
                </div>
                <div class="award_gift">
                    <img style="width: 80px; height: 80px;" src="static/images/prxd.png" alt="">
                    <p>怦然心动 <br>x15天</p>
                </div>
                <div class="award_gift">
                    <img style="width: 80px; height: 80px;" src="static/images/yyrx.png" alt="">
                    <p>有颜任性 <br>x15天</p>
                </div>
            </div>
            <div class="middle-text">
                <p>活动榜单4-10名的用户</p>
            </div>
            <div class="gold-bars">
                <div class="award_gift">
                    <img style="width: 80px; height: 80px;" src="static/images/nszj.png" alt="">
                    <p>年兽座驾 <br>x7天</p>
                </div>
                <div class="award_gift">
                    <img style="width: 80px; height: 80px;" src="static/images/sx.png" alt="">
                    <p>神仙gaigai头饰 <br>x7天</p>
                </div>
                <div class="award_gift">
                    <img style="width: 80px; height: 80px;" src="static/images/lovemoney.9.png" alt="">
                    <p>money气泡 <br>x7天</p>
                </div>

            </div>
            <div class="middle-text">
                <p>所有收集<span
                        style="color: white">福字总数量</span>超过<span>2020</span>个的用户，均可获得<br/><span>mini座驾3天</span>或<span>甜心喵头饰7天</span>，仅可二选一
                </p>
            </div>
            <div class="year-gift">
                <div class="year-gift-item gift_receive-111">
                    <img src="static/images/mini.png">
                    <p>mini座驾x3天</p>
                </div>
                <div class="year-gift-item gift_receive-10">
                    <img src="static/images/txm.png">
                    <p>甜心喵头饰x7天</p>
                    <!--  -->
                </div>
            </div>

            <div class="my-bag">
                <div class="my-bag-left">
                    <div class="my-bag-information">
                        <p class="num"></p>
                        <p>我的排名</p>
                    </div>
                    <div class="my-bag-number">

                    </div>
                </div>
                <div class="my-bag-right">
                    <div class="my-bag-num">
                        <p>我一共收集了：<span class="fu-num">0</span>个</p>
                        <img src="static/images/bag.png">
                    </div>
                    <div class="bag-box">

                    </div>
                </div>
            </div>
        </div>
        <!-- 排行开始 -->
        <div class="year-ranking">
            <ul class="switch">
                <li class='active' style="width: 100%;">福袋榜</li>
            </ul>
            <div class="ranking-box">
                <!-- 福袋榜 -->
                <div class="ranking-box-item ranking-box-0 rank_list">

                </div>

                <div class="ranking-box-item ranking-box-1 howe_list">


                </div>

                <div class="ranking-box-0-bottom">
                    <p class="num"></p>
                    <div class="ranking-box-0-head">

                    </div>
                    <div class="ranking-box-0-num">
                        <div>
                            <p>我已集齐 <span class="fu-num"></span> 个</p>
                            <img src="static/images/bag.png">
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 排行结束 -->
    </div>
    <div class="mark"></div>
    <div class="receive-box">
        <div class="close">
            <img src="static/images/close.png" alt="">
        </div>
        <div class="rules-content">

        </div>
        <div class="receive-btn">确定</div>
    </div>
    <div class="rules-box">
        <div class="close">
            <img src="static/images/close.png" alt="">
        </div>
        <div class="rules-explain">
            <img src="static/images/rules-title.png" alt="">
        </div>
        <div class="rules-text">
            <p>1、活动时间：2020年1月19日-2020年1月31日</p>
            <p>2、用户每获得1个健康福+1个事业福+1个幸运福，即可累计1个福袋，福袋榜根据用户累计的福袋数量高低排序</p>
            <p>3、福袋榜仅指定活动礼物计算榜单，其他礼物不计算榜单。</p>
            <p>4、用户累计收集福字数量超过2020个，可在活动页面领取奖励（2选1）</p>
            <p>5、本活动所有18岁以上的用户均可参加。本活动最终解释权归声撩所有，本活动与苹果无关。</p>
        </div>
    </div>
</div>
<script src="src/jquery.min.js"></script>
<script src="src/index/common.js"></script>
<script src="src/index/index.js"></script>
</body>
</html>
